<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            background-color: gold;
        }
    </style>
</head>
<body>
    <!-- 
        标准文档流：
            ...... 

        固定定位和绝对定位是完全脱离标准文档流。

        浮动布局：
            目的：让块级盒子并排显示。   出国。
            浮动的元素并没有完全脱离标准文档流。
     -->
    <div class="box">
        <!-- <div class="item" style="float:left; width:100px; height:100px; background:red">son1</div>
        <div class="item" style="float:left; width:100px; height:100px; background:blue">son2</div>
        <div class="item" style="float:left; width:100px; height:100px; background:yellowgreen">son3</div>
        <div class="item" style="float:left; width:100px; height:100px; background:pink">son4</div> -->

        <div class="item" style="float:right; width:100px; height:100px; background:red">son1</div>
        <div class="item" style="float:right; width:100px; height:100px; background:blue">son2</div>
        <div class="item" style="float:right; width:100px; height:100px; background:yellowgreen">son3</div>
        <div class="item" style="float:right; width:100px; height:100px; background:pink">son4</div>
    </div>
</body>

</html>